<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pointer Control Panel</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center; /* 居中对齐 */
        }
        .button-container {
            display: flex; /* 使用 Flexbox 布局 */
            flex-wrap: nowrap; /* 不换行 */
            justify-content: space-between; /* 均匀分布按钮 */
            margin: 10px 0; /* 上下间距 */
            overflow-x: auto; /* 如果按钮超出容器宽度，允许横向滚动 */
            width: 100%; /* 确保容器宽度为100% */
        }
        button {
            flex: 1; /* 使按钮均匀分布 */
            margin: 5px; /* 增加按钮之间的间距 */
            padding: 10px 20px; /* 增加内边距 */
            font-size: 16px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
            border: none; /* 去掉边框 */
            border-radius: 5px; /* 圆角 */
            background-color: #4CAF50; /* 按钮背景色 */
            color: white; /* 按钮文字颜色 */
            cursor: pointer; /* 鼠标悬停时显示手型 */
            transition: background-color 0.3s; /* 添加过渡效果 */
        }
        button:hover {
            background-color: #45a049; /* 悬停时改变背景色 */
        }
    </style>
</head>
<body>
    <h1 style="
    width: 200px;
">质检页面控制中台</h1>
    <div class="button-container">
        <button id="moveRandom">点击进入影像画面</button>
        <button id="ocr">点击进入OCR</button>
    </div>

     


    <script src="js/inject.js"></script>
    <script src="js/script.js"></script>
    <script src="js/popup.js"></script>
</body>
</html>
